<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width='device-width', initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SIDE_SHAKE</title>
</head>

<body>
    <style>
        :root {
            --rotateY: 0;
            --rotateX: 0;
        }

        .shake {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #000;
            transform: perspective(500px) rotateY(calc(var(--rotateY) * 1deg)) rotateX(calc(var(--rotateX) * 1deg));
            transition: transform .2s ease-out;
        }

        .bahske {
            right: 0;
            /* animation: dahske 1s infinite linear forwards; */
        }
        .ashake {
        }
        @keyframes dahske {
            0% {
                transform: perspective(500px) rotateY(0deg) rotateX(0deg);
            }

            25% {
                transform: perspective(500px) rotateY(9deg) rotateX(-9deg);
            }

            50% {
                transform: perspective(500px) rotateY(9deg) rotateX(-9deg);
            }

            100% {
                transform: perspective(500px) rotateY(-9deg) rotateX(9deg);
            }
        }
    </style>
    <div class="shake ashake" current-color="green"></div>
    <div class="shake bahske"></div>
    <img src="" alt="">
    <script>
        const root = document.documentElement;
        const shake = document.querySelector('.bahske');
        shake.addEventListener('mousemove', handlerOver);

        function handlerOver(e) {
            requestAnimationFrame(() => {
                
                let { target: { offsetWidth, offsetHeight }, offsetX, offsetY } = e;
                let rate = 10;
                let origin = {
                    x: offsetWidth / 2,
                    y: offsetHeight / 2
                }
                let dist = {
                    x: (offsetX - origin.x) / origin.x * rate,
                    y: (origin.y - offsetY) / origin.y * rate
                }
                e.target.style.setProperty("--rotateX", dist.y);
                e.target.style.setProperty("--rotateY", dist.x);
                e.target.style.setProperty('transform', `perspective(500px) rotateY(${dist.x}deg) rotateX(${dist.y}deg)`)
            })
        }

    </script>
</body>

</html>